import { createElements, css, define, itag } from "./itag/index.js";

// CSS 样式，定义了 API 列表的外观
const STYLE = css`
    :host {
        display: block;

        .ol {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        li {
            background-color: #cef;
            cursor: pointer;
            list-style: none;
            padding: 0.2em 0.4em;
            user-select: none;
        }

        li:nth-child(odd) {
            background-color: #e0f7fa; /* 单数项的背景颜色 */
        }

        li:hover {
            background-color: lightblue;
        }

        li.active {
            background-color: rgb(72, 180, 194);
        }
    }
`;

/**
 * 用于展示和管理 API 列表，允许用户选择一个 API
 */
export class ApiList extends HTMLElement {
    // 存储组件中的 DOM 节点引用
    readonly #nodes = createElements({
        ol: "ol",
    });

    // 存储所有添加的 API 元素，以 API 名称为键
    readonly #elements: Record<string, HTMLElement>;

    // 当前选中的 API 名称
    #value: string | undefined;

    // 当前选中的 API 对应的 DOM 元素
    #active: HTMLElement | undefined;

    /**
     * 构造函数，初始化组件
     */
    constructor() {
        super();
        this.#elements = Object.create(null);

        const sr = this.attachShadow({ mode: "open" });
        sr.adoptedStyleSheets.push(STYLE);
        itag`
${sr}
    ${this.#nodes.ol} .ol
`;
    }

    /**
     * 添加一个新的 API 项到列表中
     * @param value API 的名称
     * @param name API 的显示名称，默认为 value
     */
    add(value: string, name: string | undefined = value) {
        const item = document.createElement("li");
        item.textContent = name;
        item.addEventListener("click", () => {
            this.value = value;
        });
        this.#elements[value] = item;
        this.#nodes.ol.appendChild(item);
    }

    /**
     * 获取当前选中的 API 名称
     * @returns 当前选中的 API 名称，如果没有选中则返回 undefined
     */
    get value() {
        return this.#value;
    }

    /**
     * 设置当前选中的 API
     * @param value API 名称或 undefined 取消选中
     */
    set value(value: string | undefined) {
        if (this.#value === value) {
            return;
        }
        if (value === undefined) {
            this.#value = undefined;
            if (this.#active !== undefined) {
                this.#active.classList.remove("active");
                this.#active = undefined;
            }
            return;
        }

        const item = this.#elements[value];
        if (item === undefined) {
            console.warn(`Unknown item: ${value}`);
            return;
        }
        if (this.#active !== undefined) {
            this.#active.classList.remove("active");
            this.#active = undefined;
        }
        this.#value = value;
        this.#active = item;
        this.#active.classList.add("active");
        this.dispatchEvent(new Event("change"));
    }
}

// 将 ApiList 组件注册为自定义元素 "api-list"
define("api-list", ApiList);
